<template>
  <view class="hcs_container">
    <view class="daiqu_form">
      <view class="daiqu_row">
        <view class="daiqu_label">代取人信息</view>
        <view class="daiqu_value" @click="openMember">
          <text class="value_text" style="color:#999" v-if="nameShow">{{ nowMember.name }}</text>
          <text class="value_text" v-else>请完善代取人信息</text>
          <IconFont name="rect-right" size="20rpx" color="#999"></IconFont>
        </view>
      </view>
      <view class="daiqu_row">
        <view class="daiqu_label">代取权限有效期</view>
        <view class="daiqu_value" @click="openHours">
          <text class="value_text">{{nowHour}}小时</text>
          <IconFont name="rect-right" size="20rpx" color="#999"></IconFont>
        </view>
      </view>
    </view>
    <template v-for="(item, index) in showList">
      <list-item
          :item="item"
          :index="index"
      ></list-item>
    </template>
  </view>
  <view class="pickUpBottom" v-if="paylist.length===0">
    <view class="botBtn" @click="savePickUp">确定办理</view>
  </view>
  <view class="payBottom" v-else>
    <view class="total">将取{{ allCount }}件</view>
    <view class="count">合计</view>
    <view style="margin-right: 5rpx;">
      <view class="money">￥ {{ allPrice }}</view>
      <view class="detail" @click="popShow = !popShow">明细 ∧</view>
    </view>
    <view class="pay" @click="toPay">立即支付</view>
  </view>
  <nut-popup :style="{ height: '900rpx' }" position="bottom" :closeable="true" round v-model:visible="popShow">
    <view class="price_pop">
      <view class="title">费用明细</view>
      <view class="contant" v-if="paylist.length === 1">
        <view class="price_header">
          <view class="m">合计费用</view>
          <view class="n">
            <view class="i">¥</view>
            <view class="j">{{ allPrice }}</view>
          </view>
        </view>
        <view class="price_row" v-for="(cost, i) in allCostList" :key="i">
          <view class="price_left">{{ cost.ssopRemark }}</view>
          <view class="price_right">¥{{ cost.actualMoney - cost.paidMoney }}</view>
        </view>
      </view>
      <view class="content_batch" v-if="paylist.length > 1">
        <price-details v-for="(item, index) in paylist" :item="item" />
      </view>
      <view class="payBottom">
        <view class="total">将取{{ allCount }}件</view>
        <view class="count">合计</view>
        <view style="margin-right: 5rpx;">
          <view class="money">￥ {{ allPrice }}</view>
          <view class="detail" @click="popShow = !popShow">明细 ∨</view>
        </view>
        <view class="pay" @click="toPay">立即支付</view>
      </view>
    </view>
  </nut-popup>
<!--  有效期选择-->
  <drawer :show="showHours" :show-border="false" :title="'代取权限有效期'" @close="closeHours" :show-close="true" :zIndex="3000">
    <view class="hours_box">
      <view
          v-for="(item,index) in hoursList"
          class="hour_btn"
          :class="{active:selectedHour===item}"
          @click="selectedHour=item"
      >{{item}}小时</view>
    </view>
    <view class="save_hours">
      <view class="save_hours_btn" @click="saveHour">
        <text>确  定</text>
      </view>
    </view>
  </drawer>
<!--  代取人信息-->
  <drawer :show="showMember" :show-border="true" :title="'代取人信息'" @close="closeMember" :show-close="true" :zIndex="3000">
    <view class="member_box">
      <view class="member_row">
        <view class="member_label">代取人姓名</view>
        <nut-input
            v-model="fillingMember.name"
            class="nut-input-text"
            placeholder="请填写代取人姓名"
            type="text"
            :border="false"
        />
      </view>
      <view class="member_row">
        <view class="member_label">代取人手机号</view>
        <nut-input
            v-model="fillingMember.phone"
            class="nut-input-text"
            placeholder="请填写代取人手机号"
            type="text"
            :border="false"
        />
      </view>
      <view class="member_row">
        <view class="member_label">代取人身份证</view>
        <nut-input
            v-model="fillingMember.idCard"
            class="nut-input-text"
            placeholder="请填写代取人身份证"
            type="text"
            :border="false"
        />
      </view>
    </view>
    <view class="member_tips">
      <view class="member_tips_box">
        <view class="head">温馨提示：</view>
        <view class="mes">为了您的货物安全，请认真填写“代取人信息”，代取人到达提货网点后，我们将核对代取人的身份与您所填的信息是否一致。</view>
      </view>
    </view>
    <view class="save_member">
      <view class="save_member_btn" @click="saveMember">
        <text>确  定</text>
      </view>
    </view>
  </drawer>
</template>
<script lang="ts" setup>
import { computed, ref, watch ,onMounted} from "vue";
import Taro,{ useDidShow } from "@tarojs/taro";
import listItem from '@/pages/pickUp/handleCallSomeList.vue';
import useUserInfoStore from "@/store/user";
import useTransactionStore, { transaction } from "@/store/pickUp";
import usePickUpBatchStore from "@/store/pickUpBatch";
import { $post, $get } from "@/@api";
import {IconFont} from "@nutui/icons-vue-taro";
import priceDetails from './priceDetails.vue'
const userStore = useUserInfoStore();
const transactionStore = useTransactionStore();
const pickUpBatchStore = usePickUpBatchStore();

const popShow = ref<boolean>(false)
const nameShow=ref<boolean>(false)
const allCount = ref<number>(0)
  onMounted(() => {
  console.log(showList.value[0].orderList, "列表数据");

})
const showList = ref(pickUpBatchStore.list.map((item)=>{
  item.orderList.forEach((order)=>{
    order.goodsInfo.forEach((goods)=>{
      goods.number = 0
    })
  })
  return item
}))
const paylist = ref([])
paylist.value =showList.value[0].orderList.filter((item)=>{
  return !item.allPaid 
})
const allPrice = computed(() => {
  return showList.value[0].orderList.reduce((sum, it) => {
    let p = 0
    it.costList.forEach((cost) => {
      p = p + (cost.actualMoney - cost.paidMoney)  // 后端待联调
    })
    return sum + p
  }, 0)
})

//有效期弹窗
const showHours = ref<boolean>(false)
const selectedHour = ref<number>(24) //选中的时间
const nowHour =  ref<number>(24) //确定的时间
const hoursList = ref<number[]>([4,8,12,24,48,72])
const openHours = ()=>{
  selectedHour.value = nowHour.value
  showHours.value = true
}
const closeHours = ()=>{
  showHours.value = false
}
const saveHour = ()=>{
  nowHour.value = selectedHour.value
  showHours.value = false
}

//代取人信息弹窗
const showMember = ref<boolean>(false)
const fillingMember = ref({
  name: '',
  phone: '',
  idCard: ''
})
const nowMember = ref({
  name: '',
  phone: '',
  idCard: ''
})
const openMember = ()=>{
  fillingMember.value = nowMember.value
  showMember.value = true
}
const closeMember = ()=>{
  showMember.value = false
}
const saveMember = ()=>{
  nowMember.value = fillingMember.value
  if (checkInfo() !==true) return;
    showMember.value = false
}

const allCostList = computed(() => {
  let costList: any[] = []
  let arr = showList.value[0].orderList
  arr.forEach((item) => {
    item.costList.forEach((cost) => {
      let nameIndex = costList.findIndex((newCost: any) => {
        return newCost.ssopRemark === cost.ssopRemark
      })
      if (nameIndex === -1) {
        costList.push({
          ssopRemark: cost.ssopRemark,
          actualMoney: cost.actualMoney ? Number(cost.actualMoney) : 0,
          paidMoney: cost.paidMoney ? Number(cost.paidMoney) : 0,
        })
      }
      else {
        costList[nameIndex].actualMoney += cost.actualMoney ? Number(cost.actualMoney) : 0
        costList[nameIndex].paidMoney += cost.paidMoney ? Number(cost.paidMoney) : 0
      }
    })
  })
  return costList
})

watch(()=>showList.value,(newVal)=>{
  console.log(newVal)
  let count = 0
  newVal.forEach(branch=>{
    branch.orderList.forEach(order=>{
      order.goodsInfo.forEach(goods=>{
        count += parseInt(goods.number)
      })
    })
  })
  allCount.value = count
},{deep:true,immediate:true})
// 判断信息是否完整
const checkInfo=()=>{
    let userToast=["请输入代取人姓名","请输入代取人手机号","请输入代取人身份证"]
    let tem=0
    let phoneRegex = /^1[3-9]\d{9}$/;
    let idCardRegex = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
    for (let index in nowMember.value) {
      if(nowMember.value[index]=="")
      return Taro.showToast({
      icon: "none",
      title: userToast[tem],
    })
    tem++
    }
    if (phoneRegex.test(nowMember.value.phone)==false)
      return Taro.showToast({
      icon: "none",
      title: "请输入正确的手机号码格式",
    })

    if (idCardRegex.test(nowMember.value.idCard)==false)
      return Taro.showToast({
      icon: "none",
      title: "请输入正确的身份号码格式",
    })
    nameShow.value=true
    return true
}

//确定取货
const savePickUp = async ()=>{
  if (checkInfo() !==true) return
  // if(allCount.value > 0){
  //   let arr:any = []
  //   showList.value.forEach(branch=>{
  //     branch.orderList.forEach(order=>{
  //       order.goodsInfo.forEach(goods=>{
  //         arr.push({
  //           orderId: order.billNo,
  //           ssogId: goods.ssogId,
  //           goodsName: goods.goodsName,
  //           num: goods.number,
  //           receiverIdNo: '',
  //           customerIdNo: '',
  //           receiverName: order.receiver,
  //           companyNo: branch.branchCompanyNo,
  //           ispicked: false,
  //           isFlag: 0
  //         })
  //       })
  //     })
  //   })
  //   let res:any = await $post('/selfmachine-system/takeCargo/takeGoodsByBillNo',arr)
  //   if(res.data.code === 200){
  //     let successRes = await $post('/selfmachine-system/order/list/waitPickUpNew',arr.map(item=>{return item.orderId}))
  //     transactionStore.transactionList = successRes.data.data || []
  //     transactionStore.pickUpCode = transactionStore.transactionList.map(item=>{return item.pickUpCode})
      Taro.redirectTo({
        url: '/pages/pickUp/success'
      })
  //   }
  // }
  // else{
  //   Taro.showToast({
  //     icon: 'none',
  //     title: '请添加一定数量的货物'
  //   })
  // }
}
//去支付
const toPay = async ()=>{
  // Taro.navigateTo({
  //   url: "/pages/pay/index",
  // });
  if (checkInfo() !==true) return
  Taro.redirectTo({
        url: '/pages/pickUp/success'
      })
}
</script>
<style lang="scss">
page {
  background-color: #f5f5f5;
}
.hcs_container {
  width: 100%;
  box-sizing: border-box;
  padding: 16rpx 24rpx;
  .daiqu_form {
    width: 100%;
    margin-bottom: 16rpx;
    box-sizing: border-box;
    padding: 0 24rpx;
    background-color: #fff;
    border-radius: 16rpx;
    .daiqu_row {
      width: 100%;
      height: 104rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .daiqu_label {
        color: #666;
        font-size: 28rpx;
      }
      .daiqu_value {
        display: flex;
        align-items: center;
        .value_text {
          color: #252525;
          margin-right: 16rpx;
          font-size: 28rpx;
        }
      }
      &:first-child {
        border-bottom: 1rpx solid #f5f5f5;
      }
    }
  }
}
.pickUpBottom {
  width: 100%;
  background: #fff;
  position: fixed;
  bottom: 0;
  height: 128rpx;
  border-top: 1rpx solid #f5f5f5;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2500;
  .botBtn {
    width: 700rpx;
    height: 88rpx;
    border-radius: 44rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #0966ff;
    color: #fff;
    font-size: 32rpx;
  }
}
.hours_box {
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
  .hour_btn {
    margin: 20rpx 0;
    width: 204rpx;
    height: 72rpx;
    line-height: 72rpx;
    box-sizing: border-box;
    background-color: #f4f5f6;
    color: #252525;
    border-radius: 36rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    &.active {
      border: 1rpx solid #0966ff;
      background-color: #f2f7ff;
      color: #0966ff;
    }
  }
}
.save_hours {
  width: 100%;
  background-color: #fff;
  box-sizing: border-box;
  padding: 32rpx 24rpx 20rpx;
  .save_hours_btn {
    width: 100%;
    height: 80rpx;
    border-radius: 40rpx;
    background-color: #0966ff;
    color: #fff;
    font-size: 32rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    image {
      width: 36rpx;
      height: 36rpx;
      margin-right: 16rpx;
    }
  }
}
.member_box {
  width: 100%;
  box-sizing: border-box;
  background-color: #fff;
  padding: 0 24rpx;
  border-bottom: 16rpx #f5f5f5 solid;
  .member_row {
    width: 100%;
    height: 104rpx;
    line-height: 104rpx;
    border-bottom: 1rpx solid #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .member_label {
      width: 170rpx;
      font-size: 28rpx;
      color: #666;
      text-align: right;
    }
    .nut-input {
      padding: 0;
      width: calc(100% - 190rpx);
    }
    &:last-child {
      border: none;
    }
  }
}
.member_tips {
  width: 100%;
  padding: 24rpx 24rpx 0;
  box-sizing: border-box;
  .member_tips_box {
    width: 100%;
    box-sizing: border-box;
    padding: 20rpx 24rpx;
    border: 1rpx solid #b2d0ff;
    background-color: #e5efff;
    border-radius: 8rpx;
    .head {
      color: #666;
      font-size: 24rpx;
      line-height: 32rpx;
    }
    .mes {
      color: #666;
      font-size: 20rpx;
      line-height: 28rpx;
      margin-top: 4rpx;
    }
  }
}
.save_member {
  width: 100%;
  background-color: #fff;
  box-sizing: border-box;
  padding: 32rpx 24rpx 20rpx;
  .save_member_btn {
    width: 100%;
    height: 80rpx;
    border-radius: 40rpx;
    background-color: #0966ff;
    color: #fff;
    font-size: 32rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    image {
      width: 36rpx;
      height: 36rpx;
      margin-right: 16rpx;
    }
  }
}
.price_pop {
  background-color: #f5f5f5;

  .title {
    height: 112rpx;
    display: flex;
    align-items: center;
    padding-left: 24rpx;
    font-size: 32rpx;
    color: #252525;
    font-weight: 700;
    background-color: #fff;
    box-sizing: border-box;
  }

  .contant {
    height: 600rpx;
    width: 100%;
    overflow: auto;

    .price_row {
      width: 100%;
      height: 64rpx;
      padding: 0 120rpx;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .price_left {
        font-family: PingFang SC;
        font-size: 28rpx;
        color: #252525;
      }

      .price_right {
        font-family: PingFang SC Medium;
        font-size: 28px;
        color: #252525;
      }
    }

    .price_header {
      margin-top: 48rpx;
      margin-bottom: 32rpx;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;

      .m {
        font-family: PingFang SC;
        font-size: 24rpx;
        color: #252525;
      }

      .n {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;

        .i {
          font-family: PingFang SC;
          font-size: 44rpx;
          /* 外部/主色/蓝 */
          color: #0966ff;
        }

        .j {
          font-family: PingFang SC;
          font-size: 76rpx;
          color: #0966ff;
        }
      }
    }
  }

  .content_batch {
    padding-bottom: 16rpx;
    height: 600rpx;
    width: 100%;
    overflow: auto;
  }
}

.payBottom {
  display: flex;
  justify-content: space-around;
  font-size: 24rpx;
  color: #666666;
  width: 750rpx;
  padding-top: 18rpx;
  background: #FFFFFF;
  height: 128rpx;
  position: fixed;
  bottom: 0;
  z-index: 9;
  .total {
    margin-top: 8rpx;
    margin-left: 108rpx;
  }

  .count {
    margin-top: 8rpx;
  }

  .money {
    font-size: 40rpx;
    color: #0966FF;
  }

  .detail {
    font-size: 24rpx;
    color: #252525;
    margin-left: 92rpx;
    margin-top: 8rpx;
  }

  .pay {
    border-radius: 88rpx;
    height: 88rpx;
    width: 296px;
    background: #0966FF;
    font-size: 32rpx;
    line-height: 88rpx;
    color: #FFFFFF;
    text-align: center;

  }
}
</style>
